<template>
  <view class="details-wrapper">
    <div class="video bg-fff">
      <video id="videoPlay" style="width: 100%"
             :style="{height: videoHeight}"
             controls :src="currentPlayVideo.videoUrl"
             :show-center-play-btn="false">
        <cover-view class="cover-view" v-if="!isBuy && currentPlayVideo.isPaid">
          <cover-view class="buy_btn" @click="jump('/pages/goods/index')">点击购买</cover-view>
        </cover-view>
      </video>
    </div>
    <!--    <view class="bg-fff u-m-b-14 u-p-l-50 u-p-b-20" style="color: #101010">
      <view class="u-p-t-20 u-p-b-10 font-36 u-flex">
        <view class="font-b">{{list.videoTitle}}</view>
        <view v-if="list.isPaid" class="u-m-l-10 u-font-20 u-p-l-15 u-p-r-15 color-active pay_tag">付费</view>
      </view>
      <view class="u-flex u-font-md">主讲人：{{list.speaker}}
        <view class="u-p-l-30">{{list.speakerIntroduction}}</view>
      </view>
    </view>-->
    <view class="u-m-b-14 bg-fff">
      <view class="title u-p-b-30 u-p-t-30">
        <view class="title-txt u-p-l-20 u-font-36">课程目录</view>
      </view>
      <view class="video-list u-p-l-30 u-p-r-30">
        <view class="item-video u-flex u-row-between u-p-t-28 u-p-b-28 u-border-top"
              :class="{'color-active': currentPlayIndex == index}"
              :key="index"
              @click="itemVideClick(index)"
              v-if="index < showMoreLen"
              v-for="(item, index) in list.compassVideoListList">
          <view class="u-flex">
            <view style="max-width: 480upx;word-break: break-all">{{index + 1}}.{{item.videoName}}</view>
            <view class="pay_tag u-m-l-10 u-font-20 u-p-l-15 u-p-r-15 color-active"
                  v-if="item.isPaid">付费</view>
          </view>
          <view class="color-999">{{item.videoDuration}}分钟</view>
        </view>
        <view class="load-more u-font-24" @click="changeShowMore" v-if="list.compassVideoListList && list.compassVideoListList.length > 4">
          <img src="../../static/icon/line.png" class="line"/>
          {{showMore ? '内容收起' : '展开更多'}}
        </view>
      </view>
    </view>
    <!--评价-->
    <view class="u-m-b-14 bg-fff">
      <view class="title u-p-b-30 u-p-t-30 u-flex u-row-between u-p-r-28">
        <view class="title-txt u-p-l-20 u-font-36">课程评价</view>
        <navigator :url="`/pages/comment/list?id=${list.id}&type=class&allFree=${isAllFree}`" class="color-active u-font-28 u-flex u-center">
          <view style="color: #245482">查看全部</view>
          <u-icon :name="require('../../static/icon/arrow-right.png')" size="28" class="u-m-l-10"></u-icon>
        </navigator>
      </view>
      <evaList :list="list.evaList" :count="2" @like-change="res => list.evaList = res"></evaList>
    </view>

    <view class="bg-fff" style="padding-bottom: 140upx">
      <view class="title u-p-b-30 u-p-t-30">
        <view class="title-txt u-p-l-20 u-font-36">课程介绍</view>
      </view>
      <u-parse :html="list.videoDetails"></u-parse>
    </view>
    <view class="u-flex bg-fff fixed-bottom">
      <button style="background: transparent;color: #101010;font-size: 28upx" class="button-row" id="shareBtn" open-type="share" type="primary">
        <view class="u-flex flex-center">
          <u-icon :name="require('../../static/icon/share.png')" color="#888" size="36" class="u-m-r-10"></u-icon>
          <span>分享</span>
        </view>
      </button>
      <view class="flex-1 u-text-right u-flex" style="flex-direction: row-reverse">
        <view class="u-p-20 u-flex flex-center" @click="like">
          <u-icon :name="list.likeFlag ? require('../../static/icon/liked.png') : require('../../static/icon/like.png')" size="36" class="u-m-r-10"></u-icon>
          <span :class="{'color-active': list.likeFlag }">{{list.likeNum ? list.likeNum : '点赞'}}</span>
        </view>
        <view @click="toEva" class="u-p-20 u-flex flex-center">
          <u-icon :name="require('../../static/icon/env.png')" color="#888" size="36" class="u-m-r-10"></u-icon>
          <span>评价</span>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {THEME} from "../mixins/config"
import {request} from "../../util/api"
import {getCurrentFullPath} from "../../util/util"
import evaList from "../../components/evaList";

export default {
  components: {
    evaList
  },
  onLoad (option) {
    this.isIphoneX = Number(uni.getStorageSync('isIphoneX'))
    this.id = option.id
  },

  onShow () {
    this.getDetail()
    this.getBuyDetail()
  },

  onReady: function(res) {
    this.videoContext = uni.createVideoContext('videoPlay')
    this.videoHeight = uni.getSystemInfoSync().screenWidth* (9 / 16) + 'px'
  },

  data () {
    return {
      list: {},
      customStyle: {
        background: THEME.btn_active_bg_color,
        padding: '0 30rpx',
        fontWeight: 'bold'
      },
      isBuy: false,
      currentPlayIndex: 0,
      config: THEME,
      id: '',
      showMore: false,
      showMoreLen: 4,
      videoHeight: 0,
      isIphoneX: 0
    }
  },

  computed: {
    currentPlayVideo() {
      if (this.list.compassVideoListList) {
        return this.list.compassVideoListList[this.currentPlayIndex]
      }
      return  {}
    },

    isAllFree() {
      if (this.list.compassVideoListList) {
        let allFree = true
        this.list.compassVideoListList.forEach(item => {
          if (item.isPaid) {
            allFree = false
          }
        })
        return allFree
      }
      return false
    }
  },

  methods: {
    getBuyDetail () {
      var user = uni.getStorageSync('zbz_user')
      if (user && user.token) {
        request({
          url: '/app/userCenter/getLoginUserInfo'
        }).then(res => {
          let endEvaluateTime = new Date(res.data.endEvaluateTime).getTime()
          let _now = new Date().getTime()
          if (_now > endEvaluateTime) {
            this.isBuy = false
          } else {
            this.isBuy = true
          }
        })
      }
    },

    toEva() {
      this.$u.route({
        url: `/pages/comment/list?id=${this.list.id}&type=class&allFree=${this.isAllFree}`
      })
    },

    getDetail () {
      request({
        url: '/system/get/CompassVideoClassBy/' + this.id,
      }).then(res => {
        this.list = res.data
      })
    },

    jump (path) {
      this.$u.route({
        url: path
      })
    },

    itemVideClick (index) {
      this.currentPlayIndex = index
      this.$nextTick(() => {
        if (!this.isBuy && this.currentPlayVideo.isPaid) {
          return
        }
        this.videoContext.play()
      })
    },

    // 点赞
    like() {
      request({
        url: `/system/CompassLikeLog/system/wx/updateLikeLog/${this.list.id}/1`
      }).then(res => {
        this.list.likeFlag = !this.list.likeFlag
        if (res.msg == '点赞成功') {
          this.list.likeNum++
        } else {
          this.list.likeNum--
        }
      })
    },

    changeShowMore() {
      this.showMore = !this.showMore
      this.showMoreLen = this.showMore ? 9999 : 4
    }
  },

  onShareAppMessage (res) {
    return {
      path: getCurrentFullPath()
    }
  }
}
</script>

<style scoped lang="scss">
  .cover-view {
    width: 100%;
    height: 400upx;
    text-align: center;
    line-height: 400upx;
    background: rgba(0,0,0,.3);
    display: flex;
    align-items: center;
    justify-content: center;
    .buy_btn {
      width: 200upx;
      height: 70upx;
      line-height: 70upx;
      background: #1F476D;
      border-radius: 35upx;
      color: #fff;
    }
  }
  .pay_tag {
    border: 2upx solid #2A6AAA;
    border-radius: 18upx;
  }
  .details-wrapper {
    background: rgba(187, 187, 187, .21);
    color: #101010;
    font-size: 28upx;
  }
  .title {
    .title-txt {
      border-left: 8upx solid $btn_active_bg_color;
      line-height: 30upx;
    }
  }
  .fixed-bottom {
    position: fixed;
    bottom: 0;
    width: 100%;
    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.4);
    min-height: 60upx;
    line-height: 60upx;
    padding-bottom: constant(safe-area-inset-bottom);  // 核心代码
    padding-bottom: env(safe-area-inset-bottom); // 核心代码
  }
  .fixed-bottom-iphoenX {
    position: fixed;
    bottom: 0;
    height: 130upx;
    line-height: 84upx;
    padding-bottom: 40upx;
    width: 100%;
    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.4);
  }
  .button-row::after {
    content: "";
    border: none;
  }
  .load-more {
    width: 100%;
    text-align: center;
    padding: 20upx 0;
    color: #245482;
    position: relative;
    .line {
      position: absolute;
      margin: auto;
      width: 472upx;
      bottom: 0;
      right: 0;
      top: 0;
      left: 0;
      height: 40upx;
    }
  }
</style>
